@extends('backend::layout')
@section('content')

    @component('backend::component.tpl_frame')
        @slot('page_title') 托管数据 @endslot
        @slot('icon') hcl-sell-map @endslot
        @slot('class') mt-3 @endslot
        @slot('body_content')
            <table class="table table-bordered table-striped tbody info-card">
                <tbody>
                <tr><td>未结算数量</td><td>未结算金额</td><td>已结算数量</td><td>已结算金额</td></tr>
                <tr>
                    @foreach($list as $item)
                    <td>{{$item->num}}</td><td>{{$item->money}}</td>
                    @endforeach
                </tr>
                </tbody>
            </table>
            <div class="d-flex flex-nowrap" id="rg-chart" style="width: 100%;height: 400px;"></div>
        @endslot
    @endcomponent

@endsection
@push('scripts')
    <script src="{{asset(config('view.plugin').'/chart/echart/echarts.min.js')}}"></script>
    <script>
        rgChart();

        function rgChart() {
            $.get("{{route('b_PlatStats_chartTg')}}",function (response) {
                if(response.status){
                    var myChart = echarts.init(document.getElementById('rg-chart'));
                    option = {
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data:['托管次数','回款次数']
                        },
                        xAxis: {
                            type: 'category',
                            data: response.data.dates
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            name:'托管次数',
                            type: 'bar',
                            data: response.data.in_num
                        },{
                            name:'回款次数',
                            type: 'bar',
                            data: response.data.out_num
                        }]
                    };
                    myChart.setOption(option);
                }
            })
        }

    </script>
@endpush